Skip to main content

Product file upload

Allow customers to upload one or multiple files directly into the cart submission. The block works as either a standard button+filename display or an interactive dropzone.

Related: Need to add fees for file uploads? See Custom Option Fees.

Configuration steps​

  1. Add Product file upload to the product form.
  2. Choose a Line item property key and label (displayed above the field).
  3. Decide on layout:
    • Dropzone: shows a large drag-and-drop target with helper text and a button to launch the file picker.
    • Button: renders a simple button with filename text underneath.
  4. Optional settings:
    • Allow multiple files.
    • Restrict accepted file types/extensions (e.g., .png,.jpg,.pdf).
    • Adjust dropzone height, border radius, and text sizes to match your brand.
  5. Enable fees if uploading a file should add an additional SKU (for example, a digitizing service). The block shows the price next to the label.
  6. Use conditional logic if the upload should only appear after a particular selection, such as choosing a "Custom logo" option.

Shared features​

All custom option blocks share these capabilities:

  • Conditional display: Show or hide based on the value of another property using the Conditional logic settings. The block remains hidden and its inputs are disabled until the condition is met.
  • Product tag filter: Limit to products with a specific tag using the Only show when product has tag setting.
  • Width controls: Choose full or half width on tablet/desktop for easier layout mixing.
  • Fee support: When paired with the optional Custom Option Fees script, specific selections can add a hidden product to the cart. Read more in Custom Option Fees.

How to name properties​

  • The Line item property key becomes the label in the cart and order details. Use plain text such as Patch Color or Engraving.
  • Shopify automatically namespaces properties as properties[Patch Color] behind the scenes; you only need to provide the key in the block settings.
  • Reuse the same property key across languages by translating the cart label in your locale files if needed.

Customer experience​

  • Files are uploaded with the add-to-cart request and accessible in the order timeline. The block warns shoppers when a required upload is missing and provides ARIA live regions for filenames and errors for screen readers.

Troubleshooting​

  • Confirm each property has a unique key before testing. Shopify overwrites duplicate property keys with the last value submitted.
  • When fees are involved, preview the cart to ensure the correct fee product is added. Refer to Custom Option Fees for debugging tips.
  • If a conditional block never appears, double-check the comparison value spelling—it compares lowercase, trimmed text behind the scenes.

See also: